$(function() {
	var bodyHeight = $(document.body).height();
	var clientHeight = $("html")[0].clientHeight;
	$('.screen').height(clientHeight);

	console.log(clientHeight);

	$('.arr').css({
		opacity:0
	});
	//s1
	$('#screen1Image').css({
		left:164,
		opacity:0
	});

	$('.banner-right').css({
		opacity:0
	});

	$('.cloud1, .cloud2').css({
		opacity:0,
		right:-20
	})

	// s2
	$("#screen2Image").css({
		left:-100,
		opacity:0
	}).hide();

	$("#s2TitleText").css({
		top:-20,
		opacity:0
	});

	$('#s2Description').css({
        top : 20,
        opacity : 0
    });

    $('#book').css({
    	top:118,
    	opacity:0
    });

    //s3
    $('#screen3Image').css({
    	left:120,
    	opacity:0
    });

    $('#s3TitleText').css({
    	top:-20,
    	opacity:0
    });

    $('#s3Description').css({
    	top:20,
    	opacity:0
    });

    $('.headset').css({
    	left:-148,
    	opacity:0
    });

    $('.wifi').css({
    	left:21,
    	opacity:0
    });

    //s4
    $('#screen4Image').css({
    	left:-50,
    	opacity:0
    });

    $('#my, #ra, #y').css({
        width : 50,
        height : 50,
        left : 50,
        top : 25,
        opacity : 0
    });

    $('#s4TitleText').css({
    	top:-20,
    	opacity:0
    });

    $('#s4Description').css({
    	top:20,
    	opacity:0
    });

    //s5
    $('#screen5Image').css({
    	left:100,
    	opacity:0
    });

    $('#s5IconImage').css({
    	top:-20,
    	opacity:0
    });

    $('#s5TitleText').css({
    	top:-20,
    	opacity:0
    });

    $('#s5Description').css({
    	top:20,
    	opacity:0
    });

})

var setScreen4Animate = function(id) {

    var _options = {
        overDuration : 200,
        outDuration : 100,
        over : {
            width : 110,
            height : 110,
            left : 45,
            top : -5,
            opacity : 1
        },
        out : {
            width : 100,
            height : 100,
            left : 50,
            top : 0,
            opacity : 1
        }
    };

    $(id).stop().animate(_options.over, _options.overDuration, '', function() {
        $(id).stop().animate(_options.out, _options.outDuration);
    });

    $(id).on('mouseenter', function() {
        $(this).stop().animate(_options.over, _options.overDuration);
    });

    $(id).on('mouseleave', function() {
        $(this).stop().animate(_options.out, _options.outDuration);
    });
};

var scrollSet = function() {
	var windowScrollTop = $(window).scrollTop();
    var screenHeight = $(window).height();
    var clientHeight = $("html")[0].clientHeight;

    //s1
    if($('#screen2Image').data('animate') == "0") {
    	$('#screen1Image').animate({
	    	'left' : '40px',
	    	'opacity' : 1
	    },1000).show().data('animate',1);

	    $('.banner-right').animate({
	    	opacity:1
	    });

	    setTimeout(function() {
	    	$('.cloud1').animate({
		    	opacity:1,
		    	right:0
		    });

		    $('.cloud2').animate({
		    	opacity:1,
		    	right:100
		    });
	    },500);

	    $('.arrow1').animate({
	    	opacity:1
	    });
    }
    
    //s2
    if (windowScrollTop > 500 && $('#screen2Image').data('animate') == "0") {

        $('#screen2Image').animate({
         'left' : '0px',
         'opacity' : 1
         }, 1000).show().data('animate', 1);
         
         $('#s2TitleText').animate({
             top: 0,
             opacity: 1
         });
         
        $('#s2IconImage').animate({
            top : 150,
            opacity : 1
        });

        $('#s2Description').animate({
            top : 0,
            opacity : 1
        });

        $('#book').animate({
        	top:68,
        	opacity:1
        });

        $('.arrow2').animate({
	    	opacity:1
	    });
    }

    //s3
    if(windowScrollTop > (500+clientHeight) && $('#screen3Image').data('animate') == "0") {

    	$('#screen3Image').animate({
    		'left' : '20px',
    		'opacity' : 1
    	}, 1000).show().data('animate',1);

    	$('#s3TitleText').animate({
    		top:0,
    		opacity:1
    	});

    	$('#s3Description').animate({
	    	top:0,
	    	opacity:1
    	});

    	$('.headset').animate({
	    	left:-248,
	    	opacity:1
	    },1000);

	    $('.wifi').animate({
	    	left:-79,
	    	opacity:1
	    },1000);

	    $('.arrow3').animate({
	    	opacity:1
	    });
    }

    //s4
    if(windowScrollTop > (500+clientHeight*2) && $('#screen4Image').data('animate') == "0") {

    	$('#screen4Image').animate({
    		'left' : '0px',
    		'opacity' : 1
    	}, 1000).show().data('animate',1);

    	$('#s4TitleText').animate({
    		top:0,
    		opacity:1
    	});

    	$('#s4Description').animate({
	    	top:0,
	    	opacity:1
    	});

    	$('.arrow4').animate({
	    	opacity:1
	    });

    	setTimeout(function() {
            setScreen4Animate('#my');
        }, 1000);

        $('#my').data('animate', 1);

        setTimeout(function() {
            setScreen4Animate('#ra');
        }, 1150);

        setTimeout(function() {
            setScreen4Animate('#y');
        }, 1300);
    }

    //s5
    if(windowScrollTop > (500+clientHeight*3) && $('#screen5Image').data('animate') == "0") {

    	$('#screen5Image').animate({
    		'left' : '0px',
    		'opacity' : 1
    	}, 1000).show().data('animate',1);

    	$('#s5IconImage').animate({
    		top:0,
    		opacity:1
    	});

    	$('#s5TitleText').animate({
    		top:0,
    		opacity:1
    	});

    	$('#s5Description').animate({
	    	top:0,
	    	opacity:1
    	});

    	$('.arrow5').animate({
	    	opacity:1
	    });
    }
}

setTimeout(function() {
    scrollSet();
    $(window).scroll(scrollSet);
}, 200);

